import React, {Component} from 'react'
import {observer} from 'mobx-react';
import { withRouter } from 'react-router-dom';
import { StickyContainer, Sticky } from 'react-sticky';
import { ListView } from "weaver-mobile";
import { ListPage } from 'weaver-mobile-page';
const {IndexedList} = ListView;
const {Item} = ListPage;

@withRouter
@observer
export default class AllResourceList extends Component{
    renderSectionWrapper = sectionID => (<StickyContainer
        key={`s_${sectionID}_c`}
        className="sticky-container"
        style={{ zIndex: 4 }}
    />);

    renderSectionHeader = sectionData => (
        <Sticky>
        {({
            style,
        }) => (
            <div
            key={`${sectionData}`}
            className="sticky"
            style={{
                ...style, 
                zIndex: -1,
                backgroundColor: '#f3f7fe',
                color: '#999',
            }}
            >{sectionData}</div>
        )}
        </Sticky>
    )

    renderRow = (rowData, template) => {
        const isObj = (typeof(rowData) === 'object');
        if(isObj){
            return (
                <Item 
                prefixCls="wm-list-page-item"
                showImg={true}
                imgStyle={{borderRadius: '50%'}}
                data={rowData}
                template={template}
                onClick={d => {
                    this.props.history.push(`/resourceInfo/${d.id}`)
                }}
                />
            )
        }
        return (<div key={`${rowData}`} />);
    }

    render(){
        const { store } = this.props;
        const { toJS, allResouceDataSource, listViewStore, setCurrentPage } = store;
        const {data, template} = toJS(listViewStore);
        const listViewProps = {
            dataSource: toJS(allResouceDataSource),
            className: 'am-list sticky-list',
            style: {
                height: '100%'
            },
            quickSearchBarStyle:{
               top: 105
            },
            contentContainerStyle: {
                left: 0,
                right: 0
            },
            // onEndReachedThreshold: 500,
            // scrollRenderAheadDistance: 500,
            delayTime: 0,
            renderRow: rowData => this.renderRow(rowData, template),
            renderSectionWrapper: this.renderSectionWrapper,
            renderSectionHeader: this.renderSectionHeader,
            onQuickSearch: (sectionID, topId) => {},//console.debug(sectionID, topId),
            onEndReached: () => setCurrentPage()
        }

        return (
            <div className='tabPane content'>
                <div className='list list-all-resource'>
                    {
                        data.length > 0 && 
                        <IndexedList {...listViewProps} />
                    }
                </div>
            </div>
        )
    }
}